<template>
  <div>
    <!--  -->
    <div class="avator-bg">
      <img
        :src="userInfo.avator"
        mode="widthFix"
        width="100px"
        height="100px"
        class="avator"
      />
      <div>{{userInfo.nickname}}</div>
      <img src="@/assets/wave.gif" mode="scaleToFill" class="gif-wave" />
    </div>
    <!--  -->
    <div class="center_bar">
      <div @click="handleDetail('goods')">
        <van-icon name="bag" color="blue" size="25px" />
        <div>商品</div>
      </div>
      <div @click="handleDetail('released')">
        <van-icon name="todo-list" color="orange" size="25px" />
        <div>已发布</div>
      </div>
      <div @click="handleDetail('star')">
        <van-icon name="star" color="yellow" size="25px" />
        <div>关注</div>
      </div>
      <div @click="handleDetail('like')">
        <van-icon name="like" color="green" size="25px" />
        <div>喜欢</div>
      </div>
    </div>
    <!--  -->
    <div class="navigator_m">
      <van-cell-group style="margin-top: 20px">
        <van-cell
          title="我的资料"
          is-link
          size="large"
          icon="coupon-o"
          to="/myinfo"
        />
        <van-cell title="身份认证" is-link size="large" icon="location-o" to="">
          <template #right-icon>
            <van-tag v-if="certified==='true'" color="#ffe1e1" text-color="red">已认证</van-tag>
            <van-tag v-else type="danger" @click="handleCertify">前往认证</van-tag>
          </template>
        </van-cell>
        <!-- <van-cell
          title="我的评论"
          is-link
          size="large"
          icon="comment-o"
          to=""
        /> -->
        <van-cell
          title="校园通知"
          is-link
          size="large"
          icon="label-o"
          to="/notice"
        />
        <van-cell
          title="修改密码"
          is-link
          size="large"
          icon="paid"
          to="/password"
        />
        <van-cell title="我的订单" is-link size="large" icon="cart-o" to="/myOrder" />
        <van-cell
          title="退出登录"
          is-link
          size="large"
          icon="exchange"
          @click="loginOut"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data(){
    return{
      certified:localStorage.getItem("certified")
    }
  },
  created() {
    this.getUserInfo({"userID":localStorage.getItem("userID")}).then(res=>{
      if(res.code===200){
        if(res.data.certified===true){
          localStorage.setItem("certified","true")
        }
      }
    })
  },
  methods: {
    ...mapActions(['getUserInfo']),
    
    handleDetail(origin) {
      console.log(origin);
      this.$router.push({
        path: "/prefer",
        query: { origin: origin, userID: this.userInfo.userID },
      });
    },
    handleCertify(){
      this.$router.push({
        path:'/certify',
        query:{
          userID:localStorage.getItem('userID')
        }
      })
    },
    loginOut() {
      //方法一，清除token值并刷新，重定向到'/login'
      localStorage.clear()
      location.reload();
      //路由跳转
      // this.$router.go(-2);
      // this.$router.replace("/login");
      // let backlen = window.history.length - 1;
      // window.history.go(-backlen);
      // this.$router.replace("/login");
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>

<style scoped>
.avator-bg {
  background-image: url(../../assets/bg.jpg);
  background-size: cover;
  height: 20vh;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: rgb(53, 49, 49);
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.avator-bg .avator {
  border: 1px solid #979290;
  border-radius: 50%;
}
.avator-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}
.center_bar {
  width: 100vw;
  height: 50px;
}
.center_bar div {
  float: left;
  width: 25vw;
}
.van-cell {
  text-align: left;
}
</style>